import { FC, PropsWithChildren, memo } from "react";
import { Avatar, Tooltip } from "antd";
interface PropsType {
  avatarImg: string;
  userName: string;
  message?: string;
}
const FriendInfo: FC<PropsWithChildren<PropsType>> = props => {
  return (
    <div className="h-[85px] w-[85px] flex pt-1 flex-col items-center border-2 m-[3px] p-1 rounded relative">
      <Avatar
        shape="square"
        size="large"
        src={<img src={props.avatarImg} alt="avatar" />}
      />
      {props.message ? (
        <Tooltip title={props.message} color="#E7DDFF" key="#E7DDFF">
          <span className=" absolute right-[0px] text-[10px] rounded p-[1px] text-[#EFC3CA] font-semibold">
            留言
          </span>
        </Tooltip>
      ) : (
        ""
      )}
      {props.userName?.length > 5 ? (
        <Tooltip title={props.userName} color="#87d068" key="#87d068">
          <div className="w-11 truncate whitespace-nowrap overflow-hidden text-center">
            {props.userName}
          </div>
        </Tooltip>
      ) : (
        <div className="w-11 truncate whitespace-nowrap overflow-hidden text-center">
          {props.userName}
        </div>
      )}
      {props.children}
    </div>
  );
};
export default memo(FriendInfo);
